<!--
1、左侧距离
    1）text-indent（不精确，开发中常用padding）
    2）padding-left
    3）margin-left
    4）left（需要定位）

2、居中
    1）水平方向居中
        容器>容器
            text-align: center;  （给父容器添加）==》行内元素、行内块元素水平居中
            定位：水平/X轴居中
            浮动：center
        容器>文本
            text-align: center;  （给自身标签添加）
    2）垂直方向居中
        容器>容器
            定位：垂直/Y轴方向居中
        容器>文本
            line-height: 容器高度;  （行高设置为容器高度）
    
    3）针对行内元素、行内块元素的垂直对齐
        英语格子-------top-----------
               ---------------------
               ------baseline-------
               ------bottom---------
        vertical-align: middle;
            图片、文本域、单元格默认：baseline基线
            其它默认：bottom底线
        
    4）外边距左右设置为auto即可【水平】居中，仅限【块级元素】。（行内元素、行内块元素利用text-align实现）
        margin: auto;
        margin: 0 auto;
        还有一个条件：必须设置width！！！
        因为height是根据内容自身高度改变的，故不会影响水平方向的偏移，就算影响也是影响垂直方向的偏移。
    
    5）背景图片居中
        background-position: x y;

    6）固定定位、绝对定位的居中
        可视区一半
        父容器一半
        自身标签一半
        版心一半
-->
<style>
  img {
    height: 30px;
    border: 5px solid red;

    /* vertical-align: top; */
    vertical-align: middle;
    /* vertical-align: baseline; */
    /* vertical-align: bottom; */
    /* vertical-align: text-top; */
    /* vertical-align: text-bottom; */
  }
  span {
    border: 5px solid cyan;
  }
  a {
    border: 5px solid cyan;
  }
</style>

<a>pppjjj</a><img src="../resources/pictures/01.png" alt="" />
<span>你好啊</span>
